<template>
  <div class="dy-group-buy">
    <c-title text="首页"></c-title>
    <div class="head">
      <div class="flex-center" @click="toCityPage"><span class="city">{{ city_name }}</span><i
          class="iconfont icon-icon_down1"></i></div>
      <div class="input-box" @click="goto">
        <div class="flex-1 flex-center">
          <i class="iconfont icon-a-icon_pressed"></i>
          <div style="color: #999999;font-size: 0.8125rem;">请输入关键词</div>
        </div>
        <span class="search">搜索</span>
      </div>
    </div>
    <div v-if="(btn_list && btn_list.length !== 0)">
      <c-ment :datas="fun.chunk(btn_list, 10)" @open_dialog="open_dialog"></c-ment>
    </div>
    <div class="box">
      <div class="box-head">
        <span class="distance" :class="{ 'main-color': distance_max }" @click="distance">附近1km</span>
        <span class="change"
          :class="sort_by == 1 && parms[1].order_by == 1 ? 'up' : sort_by == 1 && parms[1].order_by == 2 ? 'down' : ''"
          @click="change(1)">距离</span>
        <span class="change"
          :class="sort_by == 2 && parms[2].order_by == 1 ? 'up' : sort_by == 2 && parms[2].order_by == 2 ? 'down' : ''"
          @click="change(2)">销量</span>
        <span class="change"
          :class="sort_by == 3 && parms[3].order_by == 1 ? 'up' : sort_by == 3 && parms[3].order_by == 2 ? 'down' : ''"
          @click="change(3)">价格</span>
      </div>
    </div>
    <div v-if="list && list.length !== 0">
      <Waterfall :list="list" :breakpoints="breakpoints" backgroundColor="#f5f5f5" :loadProps='loadProps' :delay="800">
        <template #item="{ item }">
          <div class="li" :key="item.id" @click="goods(item.id)">
            <div class="top">
              <LazyImg v-if="item.product_img && item.product_img.url_list.length !== 0 && item.product_img.url_list[0]"
                :url="item.product_img.url_list[0]"></LazyImg>
            </div>
            <div class="bottom">
              <div class="title">{{ item.name }}</div>
              <div class="goods-desc">
                <span v-if="item.nearest_poi.distance">{{ item.nearest_poi.distance }}</span>
                <span>{{ item.first_category.name }}</span>
                <span>已售{{ item.blurred_sold_count }}</span>
              </div>
              <div class="price">
                <div class="current-price">
                  <span class="fz-26" style="margin-right: .1563rem;">¥</span>
                  <span class="fz-34">{{ item.price }}</span>
                </div>
                <div class="original-price">¥{{ item.origin_price }}</div>
                <div class="discount"><template
                    v-if="item.marketing_info && item.marketing_info.seckill_info&&item.marketing_info.seckill_info.status == 2">秒杀</template>{{
                      item.discount }}
                </div>
              </div>
              <div class="seckill-info" v-if="item.marketing_info && item.marketing_info.seckill_info&&item.marketing_info.seckill_info">
                <span class="seckill-info-txt">秒杀中</span>
                <img :src="imgHost + '/static/local/tiktok-group-buy/miaoshabeijing.png'" alt="">
                <van-count-down :time="fun.getTimeDifference(item.marketing_info.seckill_info.end_time)" />
              </div>

              <div class="flex-center" style="margin-top: 0.4375rem;"
                v-if="item.marketing_info&& item.marketing_info.coupon_list&& item.marketing_info.coupon_list.length!==0">
                <span class="tips">券</span>
                <span class="receive">可领¥{{ item.marketing_info.coupon_list[0].discount_amount }}优惠券</span>
              </div>
            </div>

          </div>
        </template>
      </Waterfall>
    </div>
  </div>
</template>

<script>
import CMent from "./components/menu.vue";
import { Waterfall, LazyImg } from "vue-waterfall-plugin";
import "vue-waterfall-plugin/dist/style.css";
import { scrollMixin } from "../../utils/mixin";
import loading from 'assets/images/img_default.png';
export default {
  components: { Waterfall, CMent, LazyImg },
  mixins: [scrollMixin],
  data() {
    return {
      imgHost: window.location.origin,
      isLoadMore: true,
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 4
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 3
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      },
      loadProps: {
        loading: loading,
        error: loading
      },
      list: [],
      point: {},
      citycode: 0,
      parms: {
        1: { sort_by: 1, order_by: 0 },
        2: { sort_by: 2, order_by: 0 },
        3: { sort_by: 3, order_by: 0 }
      },
      category_id: "",
      cursor: 1,
      sort_by: 0,
      has_more: false,
      city_name: "定位",
      btn_list: [],
      distance_max: 0,

    };
  },

  mounted() {
    this.init();
    this.get_button();
  },
  activated(){   
    this.init_list();
    let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
    if(!myLoaction){
      this.fun
        .getLocation()
        .then((res) => {
          this.city_name = res.city;
          this.point = res.point;
          this.citycode = myLoaction.addressComponent.adcode || '';
          localStorage.setItem('dy_group_code', myLoaction.addressComponent.adcode)
          this.getData();
        })
        .catch(err => {
          console.log(err);
          this.getData();
        });
    }else{
      if (localStorage.getItem('dy_group_code') && this.$route.query.city) {//城市选择器页进入
        let citycode = localStorage.getItem('dy_group_code')|| myLoaction&&myLoaction.addressComponent.adcode;
        this.citycode = citycode;
        this.city_name = this.$route.query.city;
        this.point = myLoaction?myLoaction.point:{};
        this.getData();
      }else{
          this.city_name = myLoaction.city;
          this.point = myLoaction.point;
          this.citycode = myLoaction.addressComponent.adcode || '';
          localStorage.setItem('dy_group_code', myLoaction.addressComponent.adcode)
          this.getData();
      } 
    }
  },
  methods: { 
    init_list(){
      this.list = [];
      this.has_more = false;
      this.isLoadMore = true;
    },
    toCityPage() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "dy_group_buy" }))
    },
    goods(id) {
      let city_code = this.citycode||'';
      this.$router.push(this.fun.getUrl("dy_group_buy_details", { id ,city_code},{}))
    },
    distance() {
      this.distance_max = this.distance_max == 1 ? 0 : 1;
      this.list = [];
      this.has_more = false;
      this.getData();
    },
    get_button() {
      $http.get("plugin.tiktok-group-buy.api.goods.button-group").then(res => {
        if (res.result) {
          let data = res.data;
          this.btn_list = data;
        }else{
          this.$toast(res.msg);
        }
      })
    },
    open_dialog(data) {
      this.$router.push(this.fun.getUrl('dy_group_buy_search',{},{category_id:data.id,city:this.city_name}));
    },
    init() {
      this.distance_max = 0;
      this.sort_by = 0;
      this.point = {};
      this.parms = {
        1: { sort_by: 1, order_by: 0 },
        2: { sort_by: 2, order_by: 0 },
        3: { sort_by: 3, order_by: 0 }
      };
    },
    change(type) {
      this.list = [];
      this.has_more = false;
      let order_by = '';
      if (this.parms[type].order_by == 0) {
        order_by = 1;
      } else if (this.parms[type].order_by == 1 && type == this.sort_by) {
        order_by = 2;
      } else {
        order_by = 1;
      }
      this.parms[type].order_by = order_by;
      this.sort_by = type;
      this.getData();
    },
    getData(json = {}) {
      if (this.sort_by !== 0) {
        let order_by = this.parms[this.sort_by].order_by;
        json.sort_by = this.sort_by;
        json.order_by = order_by;
      };
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      if (this.point.lat || (myLoaction&&this.city_name == myLoaction.city)) {
        let latitude = '';
        let longitude = '';
        if (this.city_name == myLoaction.city) {
          latitude = myLoaction.point.lat * 1;
          longitude = myLoaction.point.lng * 1;
        } else {

          latitude = this.point.lat * 1;
          longitude = this.point.lng * 1;
        }
        json.latitude = latitude;
        json.longitude = longitude;
      }
      if (this.distance_max) {
        json.distance_max = 1000;
      }
      if (this.has_more) {
        json.cursor = this.cursor;
      }
      if (this.citycode) {
        json.city_code = (this.$route.query.city?localStorage.getItem('dy_group_code'):this.citycode)+'';
      }
      if (this.category_id) {
        json.category_id = this.category_id;
      }
      let _json = {
        'search': json
      }
      $http.post("plugin.tiktok-group-buy.api.goods.good-list", _json, '').then(res => {
        this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          this.has_more = data.has_more;
          this.cursor = data.cursor;
          if (data.data && data.data.length !== 0) {
            this.list = this.list.concat(data.data);
          }
        }else{
          this.$toast(res.msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.has_more) {
        this.getData();
      }
    },
    goto() {
      this.$router.push(this.fun.getUrl('dy_group_buy_search',{},{path:'index',city:this.city_name}));
    },
  }
};
</script>

<style scoped lang='scss'>
::v-deep .van-count-down {
  font-weight: 500;
  font-size: 0.6875rem;
  color: #F15353;
  flex: 1;
  padding-right: 0.2813rem;
  line-height: unset;
}

.dy-group-buy {
  .main-color {
    color: #F15353 !important;
  }

  .seckill-info {
    display: flex;
    width: 6.5625rem;
    height: 1.125rem;
    line-height: 1.125rem;
    border-radius: 0.25rem;
    background-color: #FEEDED;
    position: relative;
    margin-top: .4063rem;

    &-txt {
      z-index: 10;
      position: absolute;
      font-weight: bold;
      font-size: 0.6875rem;
      color: #FFFFFF;
      left: 0.4063rem;
      line-height: 1;
      top: .1875rem;
    }

    img {
      width: 3.4063rem;
      margin: 0;
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .li {
    border-radius: 0.5rem;
    width: 100%;
    background-color: #fff;
    padding-bottom: .6563rem;
    margin-bottom: 0.375rem;
    overflow: hidden;

    .receive {
      font-weight: 400;
      font-size: 0.75rem;
      color: #F15353;
    }

    .tips {
      width: 0.9375rem;
      height: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(91deg, rgba(255, 38, 60, 0.1) 0%, rgba(255, 116, 9, 0.1) 100%);
      border-radius: 0.25rem;
      border: 1px solid rgba(255, 38, 60, 0.3);
      font-weight: 500;
      font-size: 0.6875rem;
      color: #F15353;
      margin-right: 0.1563rem;
    }

    .fz-26 {
      font-size: .8125rem;
    }

    .fz-34 {
      font-size: 1.0625rem;
    }

    .current-price {
      display: flex;
      color: #F15353;
      font-weight: bold;
      align-items: baseline;
    }

    .original-price {
      font-weight: 400;
      font-size: 0.6875rem;
      color: #6E6E79;
      text-decoration-line: line-through;
      margin-left: .1875rem;
      margin-right: .3125rem;
    }

    .discount {
      flex-shrink: 0;
      font-weight: 400;
      font-size: 0.6875rem;
      color: #F15353;
    }

    .top {
      // display: flex;
      margin: 0;
      padding: 0;

      img {
        max-height: 14.375rem;
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: block;
      }

      .mic-content {
        margin: 0.375rem;
        padding: 0.75rem;
        background-color: #f6f6f6;
        font-size: 0.8125rem;
        color: #3b3b4a;
        line-height: 18px;
        min-height: 48px;
        border-radius: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
      }
    }

    .bottom {
      padding: 0 .625rem;

      .price {
        display: flex;
        align-items: center;
        line-height: 1;
      }

      .title {
        font-weight: 600;
        margin: .6563rem 0 .5625rem;
        font-size: 0.875rem;
        line-height: 1rem;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #00001c;
        text-align: left;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
      }

      .goods-desc {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: .2813rem;
        line-height: 1;

        span {
          margin-right: .3125rem;
          font-weight: 400;
          font-size: 0.6875rem;
          color: #6E6E79;
        }
      }


    }
  }

  .distance {
    margin-right: 1.5625rem;
  }


  .box-head {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 0.875rem;
    color: #6E6E79;

    span {
      line-height: 1;
      position: relative;
      padding-right: 0.65rem;
      margin-right: 1.4688rem;
    }

    .up::after {
      border-bottom: 0.25rem solid #F15353 !important;
    }

    .down::before {
      border-top: .25rem solid #F15353 !important;
    }

    .change::after {
      position: absolute;
      content: "";
      right: 0;
      top: -0.1rem;
      width: 0;
      height: 0;
      border-top: .25rem solid transparent;
      border-left: .25rem solid transparent;
      border-right: .25rem solid transparent;
      border-bottom: .25rem solid #AAAAB3;
    }

    .change::before {
      position: absolute;
      content: "";
      right: 0;
      bottom: -0.1rem;
      width: 0;
      height: 0;
      border-top: .25rem solid #AAAAB3;
      border-left: .25rem solid transparent;
      border-right: .25rem solid transparent;
      border-bottom: .25rem solid transparent;
    }
  }

  .box {
    padding: .9375rem 0.75rem .625rem;
    box-sizing: border-box;
  }

 

  .search {
    width: 3.125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    margin: .1875rem;
    text-align: center;
    color: #fff;
    background: #F15353;
    border-radius: 1.125rem;
    font-weight: 400;
    font-size: 0.8125rem;
  }

  .icon-a-icon_pressed {
    margin-left: .75rem;
    margin-right: .3125rem;
  }

  .flex-1 {
    flex: 1;
  }

  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1.0938rem;
    border: 0.0625rem solid #F15353;
    flex: 1;

    input {
      flex: 1;
      border: none;
      font-size: 0.8125rem;
    }

    input::-webkit-placeholder {
      font-weight: 400;
      font-size: 0.8125rem;
      color: #999999;
    }
  }

  .icon-icon_down1 {
    color: #00001C;
    font-size: 0.625rem;
    margin-left: 0.3125rem;
    margin-right: .5313rem;
  }

  .city {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
    line-height: 1;
  }

  .head {
    display: flex;
    align-items: center;
    padding: 0.5rem.75rem 0.625rem .875rem;
  }
}
</style>